<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="https://openlayers.org/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的openlayers测试</title>
  </head>
  <body>
    <div class="left-panel">
      <header>
        <p style="width: 100%; font-size: 22px; text-align: center;">黑土地沟蚀综合防控平台</p>
      </header>
    </div>

    <div class="middle-panel">
      <header style="height: 6%">

      </header>

      <div class="map-container">
        <div id="map"></div>

        <div class="map-overlay">
          <div class="layer-control-header">
            <h4>图层控制</h4>
            <span class="toggle-icon">&#9660;</span> <!-- 小三角图标 -->
          </div>
          <div class="layer-control-content expanded">
            <div class="layer-control">
              <label>
                <input type="checkbox" id="baseLayer" checked /> 基础底图
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="neBorderLayer" checked /> 东北地区边界
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="mianRiverLayer" checked /> 主要河流
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="elevation100mLayer" checked /> 高程100m
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="elevation250mLayer" checked /> 高程250m
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="countyBoundaryLayer" checked /> 县界
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="cityBoundaryLayer" checked /> 市界
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="provinceBoundaryLayer" checked /> 省界
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="countyLevelCityPointLayer" checked /> 县级市点
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="cityPointLayer" checked /> 地级市点
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="provincialCapitalPointLayer" checked /> 省会城市点
              </label>
            </div>

            <div class="layer-control">
              <label>
                  <input type="checkbox" id="simulateSmallBasinBoundaryDataLayer" checked /> 模拟小流域边界数据
              </label>
            </div>
          </div>
        </div>

        <script type="module" src="./main.js"></script>
      </div>

      <footer style="height: 22%">
        <!-- 底部内容 -->
      </footer>
    </div>

    <div class="right-panel">
    </div>
  </body>
</html>
